<!--
 * @Descripttion:
 * @Author: caijj
 * @Date: 2020-11-05 15:49:02
 * @LastEditors: caijj
 * @LastEditTime: 2021-02-09 16:12:59
-->
<template>
  <el-dialog
    :visible.sync="modalCfg.visible"
    :width="modalCfg.width || width"
    :title="modalCfg.title"
    append-to-body
  >
    <slot />
    <!-- 底部操作按钮 -->
    <span v-if="modalCfg.handlers.length !== 0" slot="footer" class="dialog-footer">
      <el-button
        v-for="item in modalCfg.handlers"
        v-show="item.isShow === 'show'||!item.isShow"
        :key="item.label"
        :loading="item.loading"
        :type="item.type"
        :icon="item.icon"
        :size="item.size"
        :disabled="item.disabled"
        @click="item.handle(that)"
      >{{ item.label }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: 'DialogModal',
  /**
   * 引用此组件，定义处理函数，一定要provide父类的this
   * provide() {
      return {
        that: this
      }
    },
   * */
  inject: ['that'],
  props: {
    width: {
      type: String,
      default: '50%'
    },
    modalCfg: {
      type: Object,
      default: () => {
        return {
          visible: false,
          title: '自定义标题',
          // 示例数组
          handlers: [
            { label: '确定', type: 'primary', size: 'large', handle: that => that.handleConfirm() },
            { label: '取消', type: 'primary', size: 'large', handle: that => that.handleCancel() }
          ]
        };
      }
    }
  }
};
</script>
